<template>
  <el-menu
    default-active="1"
    router
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
  >
    <el-menu-item
      v-for="(item, index) in quanxian"
      :key="index"
      :index="item.path"
    >
      <el-icon><icon-menu /></el-icon>
      <template #title>{{ item.title }}</template>
    </el-menu-item>
  </el-menu>
  <div class="routerSon">
    <router-view></router-view>
  </div>
  <el-button class="elBtn" type="warning" @click="addTuichu">退出</el-button>
</template>

<script setup>
import { ref, onMounted } from "vue"
import userStore from "../store/index.js"
const { permissionList } = userStore()
import { useRoute, useRouter } from "vue-router"
// 得到 router 对象
const router = useRouter()
onMounted(() => {
  init()
  console.log(quanxian.value)
})
// 当前筛选出来的权限
const quanxian = ref([])
const init = () => {
  let admin = permissionList.cerrentAdmin
  if (admin.loginId) {
    // 获取当前登陆用户的权限
    let aaa = permissionList.quanxianList.filter((item) => {
      return item.role.includes(admin.roleId)
    })
    quanxian.value = aaa
    // 存储当前筛选出来的权限的数据
    permissionList.updateScreenQuanxianList(aaa)
    aaa.forEach((item) => {
      router.addRoute("Home", {
        path: item.path,
        name: item.component,
        component: () => import("../views" + item.path + ".vue")
      })
    })
  }
  return []
}

// 退出登录
const addTuichu = () => {
  // 获取所有路由表
  console.log(router.getRoutes())
  // 循环清除添加的路由
  quanxian.value.forEach((item) => router.removeRoute(item.component))
  // router.removeRoute("Phone")
  router.push("/login")
}
</script>

<style lang="less" scoped>
.el-menu-vertical-demo {
  position: absolute;
  left: 0;
  top: 0;
}
.routerSon {
  width: 500px;
  height: 500px;
  background-color: red;
  position: absolute;
  top: 0;
  left: 130px;
}
.elBtn {
  position: absolute;
  right: 100px;
}
</style>
